<template>
  <div>
    <div :class="border === 2 ? 'desc-div-border' : 'desc-div'">
      <textarea class="desc-text description paragraph-p2-light"
                v-model="desc"
                :maxlength="limitCount"
                :placeholder="placeholder"
                @input="descInput"
      ></textarea>
      <div class="desc-limit tiny-light">{{ inputCount }}/{{ limitCount }}</div>
    </div>
  </div>
</template>
<script>

export default {
  name: "FieldTextarea",
  props: {
    border: {type: Number, default: () => 1},
    value: {type: String, default: () => ''},
    placeholder: {type: String, default: () => ''},
    limitCount: {type: Number, default: () => 500},
  },
  components: {},
  data() {
    return {
      inputCount: 0,
      desc: this.value,
    };
  },
  mounted() {
    this.desc = this.value
    this.inputCount = this.value ? this.value.length : 0
  },
  methods: {
    descInput() {
      this.inputCount = this.desc.length;
      this.desc = this.desc.substr(0, this.limitCount)
    },
    getValueLength() {
      return this.inputCount
    },
    setValue(value) {
      this.desc = value
      if (value) {
        this.inputCount = value.length
      }
    },
  },
};
</script>

<style scoped>
.desc-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 12px 8px;
  height: 108px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #F5F5F5;
}

.desc-div-border {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 12px 8px;
  height: 108px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #F5F5F5;
  border: 1px solid #FCD538;
  margin: 8px 0;
}

.desc-text {
  height: 66px;
  resize: none;
  border: none;
  background: #F5F5F5;
  width: 100%;
}

.desc-limit {
  height: 14px;
  text-align: right;
  color: #999999;
  flex: none;
  order: 1;
  align-self: stretch;
}
</style>
<style>
.van-divider {
  margin-top: 0;
  margin-bottom: 0;
}
</style>